<template>
    <mi-form-page @submit="submit"
                  :loading="edit.loading"
                  v-model:show="edit.show"
                  title="管理员编辑"
    >
        <el-form :model="edit.info"
                 :rules="rules"
                 ref="formRef">

            <el-form-item prop="username" label="账号">
                <el-space fill>
                    <mi-input v-model="edit.info.username"/>
                    <mi-form-aux>用户名第一个字符必须为英文，只能由4-12位的字母、数字、汉字、下划线组成</mi-form-aux>
                </el-space>
            </el-form-item>

            <el-form-item prop="avatar" label="头像">
                <mi-up-image v-model="edit.info.avatar" />
            </el-form-item>

            <el-form-item prop="group_id" label="角色">
                <site-user-group-select v-model="edit.info.group_id"/>
            </el-form-item>

            <el-form-item prop="realname" label="姓名">
                <mi-input v-model="edit.info.realname"/>
            </el-form-item>

            <el-form-item prop="mobile" label="手机号">
                <mi-input v-model="edit.info.mobile"/>
            </el-form-item>

            <el-form-item prop="password" label="密码">
                <el-space fill>
                    <mi-input v-model="edit.info.password" type="password" show-password />
                    <mi-form-aux>密码必须包含字母、数字和符号中的两种，由8-16位组成</mi-form-aux>
                </el-space>

            </el-form-item>

            <el-form-item prop="status" label="状态">
                <mi-switch v-model="edit.info.status"  />
            </el-form-item>

        </el-form>
    </mi-form-page>
</template>

<script setup lang="ts">
import {ref, onBeforeMount, inject, watch} from "vue";
import {simpleGet} from "@/utils/request";
import {makeModelAuth} from "@/utils/auth";
import {FormInstance} from "element-plus";
import {useAdminStore} from "@/store/admin";
import List from "@/model/list";
import Edit from "@/model/edit";
import SiteUserGroupSelect from "@/views/auth/components/siteUserGroupSelect.vue";

const props = withDefaults(defineProps<{
    edit: Edit,
    list?: List
}>(), {

})
const emits = defineEmits(['update:edit'])

const auth = makeModelAuth("auth.siteUser")
const rules : any = {
    username:[{required:true, message:'必填'}],
    group_id:[{required:true, message:'必填'}],
    status: [{required:true, message:'必填'}]
}
const formRef = ref<FormInstance>()
const groupOptions = ref([])
const admin = useAdminStore()



const submit = () => {
    let url:string = "/"
    if (props.list?.currentRow){
        url += auth.edit
    }else{
        url += auth.add
    }
    props.edit.submit({
        formRef:  formRef.value,
        url: url,
        list: props.list,
    })
}

watch(() => props.edit.show, (nv, ov) => {
    if (!nv) return;
    props.edit.init(async () => {
        // 请求角色选项
        // let optionsRes = await simpleGet('/auth.adminGroup/options')
        // groupOptions.value = optionsRes.options
        const id = props.list?.currentRow?.id

        if (id){
            // 请求表单数据
            let res = await simpleGet('/' + auth.edit, {id:id})
            props.edit.info = res.info
        }else{
            props.edit.info = {
                status:1,
            }
        }
    })
})

</script>

<style scoped>

</style>
